<template>
  <div class="header-swiper">
    <swiper :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="(item,index) in swiperList" :key="index">
          <img :src="item.imgUrl" alt="" srcset="">
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
    export default {
        props:['swiperList'],
        data(){
            return {
                swiperOption: {
                    pagination: {
                        el: '.swiper-pagination'
                    }
                },
            }
        }
    }
</script>
<style  scoped lang="stylus">
    .header-swiper{
        background:#fff;
        height: 0;
        padding-bottom:26.67%;
    }
    .header-swiper img{
        width: 100%;
        height: 100%;
    }
    .header-swiper >>> .swiper-pagination-bullet-active{
        background #fff
    }
</style>
